<!DOCTYPE html>
<html lang="en" xmlns:v-bind="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>短租排序</title>
    <link rel="stylesheet" href="../css/bootstrap.min.css">
    <link rel="stylesheet" href="../layui/css/layui.css" media="all">
    <link rel="stylesheet" href="../css/shortrent.shortrent.css">
    <script type="application/javascript" src="../js/jquery-3.3.1.js"></script>
    <script type="application/javascript" src="../js/bootstrap.min.js"></script>
    <script type="application/javascript" src="../layui/layui.js"></script>
</head>
<body id="app">
<div data-v-67ef3a4a class="csdheader">
    <div data-v-67ef3a4a class="layout clear">
        <div data-v-67ef3a4a class="left csdnav">
            <label data-v-67ef3a4a>
                <a data-v-67ef3a4a href="../login.html" class="colorRed">登录</a>
                <a data-v-67ef3a4a href="" class="colorRed">/</a>
                <a data-v-67ef3a4a href="../register.html" class="colorRed" style="margin-right: 10px;">注册</a>
            </label>


            <a data-v-67ef3a4a="" href="#mobileZuChe">手机租车</a>
            <a data-v-67ef3a4a="" href="helpCenter.html">帮助中心</a>
        </div>
        <div data-v-67ef3a4a="" class="right phone">
            <div data-v-67ef3a4a="" class="typeTab">
                <a data-v-67ef3a4a="" href="../index.html" style="color: rgb(199, 0, 11);">中文</a>&nbsp;/&nbsp;
                <a data-v-67ef3a4a="" href="../index.html">English</a>
            </div>
            <div data-v-67ef3a4a="" class="menu">
                <a data-v-67ef3a4a="" href="../login.html">我的车速递</a>
            </div>
            <div data-v-67ef3a4a="">
                <i class="layui-icon layui-icon-cellphone" style="font-size:14px;  color:#c6000f;"></i>
                <span data-v-67ef3a4a="">400-919-8000</span>
            </div>
        </div>

    </div>
</div>


<div data-v-39f7f629 class="csdnav">
    <div data-v-39f7f629="" class="layout clear">
        <div data-v-39f7f629="" class="left logo">
            <a data-v-39f7f629="" href="../index.html">
                <img data-v-39f7f629=""
                     src="">
            </a>
        </div>
        <div data-v-39f7f629="" class="left navCom">
            <ul data-v-39f7f629="">
                <li data-v-39f7f629="">

                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/activity.html" target="_self">优惠活动</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/joinWork.html" target="_blank" class="">加盟合作</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/netCar.html" target="_blank"
                       class="">网约车</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="https://www.chesudi.com/module/longRent.html" target="_blank" class="">企业长租</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="shortrent.html" target="_self" class="colorRed">短租自驾</a>
                </li>
                <li data-v-39f7f629="">
                    <a data-v-39f7f629="" href="../index.html" target="_self">
                        <span data-v-39f7f629="">首页</span></a>
                </li>
            </ul>
        </div>
    </div>
</div>

<div class="selCarMsg">
    <div class="selCarMsgCom">
        <div class="Msg" id="in"></div>
        <!--        取车地址：-->
    </div>

    <div class="selCarMsgCom">
        <div class="Msg" id="out"></div>
        <!--        还车地址：-->
    </div>
</div>


<div class="carListTab">
    <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
            <li class="layui-this">按租金排序</li>
            <li>按热度排序</li>
        </ul>
        <div class="layui-tab-content">
            <div>
                <table class="layui-hide" id="test" lay-filter="test" style="margin-left: 300px"></table>
            </div>
        </div>
    </div>
    </div>
    <script>
        layui.use(['table', 'laydate', "laypage", "layer", 'carousel', 'upload', 'element', 'slider'], function () {
            //初始化table组件对象
            var table = layui.table
                , laypage = layui.laypage//分页的组件
                , layer = layui.layer//弹框
                , laydate = layui.laydate//日期组件
                , element = layui.element;//元素的操作

            //渲染table
            table.render({
                //z找到table  id叫test的组件
                elem: '#test'
                , id: "transferTable"
                , url: '/carRent/car/showCar.do'
                , totalRow: true
                //这个很关键，就是解析 json数据库中数据的 一定要注意键值
                , cols: [[
                    {field: 'picture', title: '照片', width: 200, unresize: true, sort: true, fixed: "left", templet:'<div ><img  src="{{ d.picture }}" style="width: 30px;height: 30px"></div>'}
                    , {field: 'name', title: '名字', width: 200}
                    , {field: 'type', title: '类型', width: 200}
                    , {field: 'sitnum', title: 'sitnum', width: 200, sort: true}
                    , {field: 'price', title: '价格', width: 200}
                    , {field: 'number', title: '数量', width: 50, edit: 'text'}
                    , {fixed: 'right', width:178, align:'center', toolbar: '#barDemo'}
                ]]
                , page: true //分页开启
            });

        });

        var  active = {
            reload: function(){
                //执行重载
                table.reload('transferTable', {
                    page: {
                        curr: 1 //重新从第 1 页开始
                    }
                });
            }
        };

        $('.serchDiv .layui-btn').on('click', function(){
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
        });



    </script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail" >预定</a>
</script>
<script>
    layui.use('table', function(){
        var table = layui.table;
        //监听工具条
        table.on('tool(test)', function(obj){
            var data = obj.data;
            if(obj.event === 'detail'){
                // layer.msg('ID：'+ data.id + ' 的查看操作');
                window.location.href="../order/ordersubmit.html"+"?id="+data.id;
            }
        });
        });

    </script>
<script type="text/javascript">
    $(function(){
        $.ajax({
            type:"get",
            url:"/carRent/city/selectName.do",
            dataType:"json",
            success:function(data){
                console.log(data)
                if(data.code==1) {
                    $("#in").html("取车地址："+data.info[0]);
                    $("#out").html("还车地址："+data.info[1])
                }
            },
            error : function(){
                alert("ajax加载失败");
            }

        })
    })

</script>
</body>
</html>
